<template>
  <!-- 问题描述表单弹窗 -->
  <el-dialog
    :close-on-click-modal="false"
    v-model="visibleDialog"
    :title="props.title"
    width="650"
    draggable
    @close="closeDialog"
    :append-to-body="true"
  >
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="160">
      <el-form-item prop="exceptionWhat" label-width="0">
        <template v-if="!props.isReadonly">
          <span>1what: 什么零件号的什么特性失效了</span><br />
          <el-input
            v-model="formData.exceptionWhat"
            type="textarea"
            placeholder="请输入什么零件号的什么特性失效了"
            clearable
          />
        </template>
        <span v-else
          >1what: 什么零件号的什么特性失效了<br />{{
            formData.exceptionWhat
          }}</span
        >
      </el-form-item>
      <el-form-item prop="exceptionWhy" label-width="0">
        <template v-if="!props.isReadonly">
          <span>2why: 失效导致了什么后果</span><br />
          <el-input
            v-model="formData.exceptionWhy"
            type="textarea"
            placeholder="请输入失效导致了什么后果"
            clearable
          />
        </template>
        <span v-else
          >2why: 失效导致了什么后果<br />{{ formData.exceptionWhy }}</span
        >
      </el-form-item>
      <el-form-item prop="exceptionWhen" label-width="0">
        <template v-if="!props.isReadonly">
          <span>3when: 问题在客户发生的时间</span><br />
          <el-input
            v-model="formData.exceptionWhen"
            type="textarea"
            placeholder="请输入问题在客户发生的时间"
            clearable
          />
        </template>
        <span v-else
          >3when: 问题在客户发生的时间<br />{{ formData.exceptionWhen }}</span
        >
      </el-form-item>
      <el-form-item prop="exceptionWhere" label-width="0">
        <template v-if="!props.isReadonly">
          <span>4where: 在客户处的哪个过程发现的失效</span><br />
          <el-input
            v-model="formData.exceptionWhere"
            type="textarea"
            placeholder="请输入在客户处的哪个过程发现的失效"
            clearable
          />
        </template>
        <span v-else
          >4where: 在客户处的哪个过程发现的失效<br />{{
            formData.exceptionWhere
          }}</span
        >
      </el-form-item>
      <el-form-item prop="exceptionWho" label-width="0">
        <template v-if="!props.isReadonly">
          <span>5who: 在客户处的发现者是谁（岗位）</span><br />
          <el-input
            v-model="formData.exceptionWho"
            type="textarea"
            placeholder="请输入在客户处的发现者是谁（岗位）"
            clearable
          />
        </template>
        <span v-else
          >5who: 在客户处的发现者是谁（岗位）<br />{{
            formData.exceptionWho
          }}</span
        >
      </el-form-item>
      <el-form-item prop="exceptionHow" label-width="0">
        <template v-if="!props.isReadonly">
          <span>6how: 如何发现的失效（客户的检测方法）</span><br />
          <el-input
            v-model="formData.exceptionHow"
            type="textarea"
            placeholder="请输入如何发现的失效（客户的检测方法）"
            clearable
          />
        </template>
        <span v-else
          >6how: 如何发现的失效（客户的检测方法）<br />{{
            formData.exceptionHow
          }}</span
        >
      </el-form-item>
      <el-form-item prop="exceptionHowMuch" label-width="0">
        <template v-if="!props.isReadonly">
          <span>7how much: 多少个（追溯信息是什么）</span><br />
          <el-input
            v-model="formData.exceptionHowMuch"
            type="textarea"
            placeholder="请输入多少个（追溯信息是什么）"
            clearable
          />
        </template>
        <span v-else
          >7how much: 多少个（追溯信息是什么）<br />{{
            formData.exceptionHowMuch
          }}</span
        >
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button
          v-if="!props.isReadonly"
          type="success"
          :loading="loading"
          @click="handleSubmit(1)"
          >提 交</el-button
        >
        <el-button
          v-if="!props.isReadonly"
          type="primary"
          :loading="loading"
          @click="handleSubmit(0)"
          >保 存</el-button
        >
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { useDictStoreHook } from "@/store/modules/dictionary"; // 引入
const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "QMSQ8DD2ADDORUPDATE",
  inheritAttrs: false,
});

const emit = defineEmits(["reset-table", "change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});

const visibleDialog = ref(false);
watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
    setTimeout(() => {
      formRef.value.clearValidate();
    }, 50);
    //getD2(formData.qualityExceptionId);
  }
);

const rules = reactive({
  qualityExceptionId: [
    { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" },
  ],
  qualityExceptionCode: [
    { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" },
  ],
  exceptionWhat: [
    { min: 1, max: 1000, message: "长度在 1 到 1000 个字符", trigger: "blur" },
    { required: true, message: "请输入问题描述", trigger: "blur" },
  ],
  exceptionWhy: [
    { min: 1, max: 1000, message: "长度在 1 到 1000 个字符", trigger: "blur" },
    { required: true, message: "请输入问题描述", trigger: "blur" },
  ],
  exceptionWhen: [
    { min: 1, max: 1000, message: "长度在 1 到 1000 个字符", trigger: "blur" },
    { required: true, message: "请输入问题描述", trigger: "blur" },
  ],
  exceptionWhere: [
    { min: 1, max: 1000, message: "长度在 1 到 1000 个字符", trigger: "blur" },
    { required: true, message: "请输入问题描述", trigger: "blur" },
  ],
  exceptionWho: [
    { min: 1, max: 1000, message: "长度在 1 到 1000 个字符", trigger: "blur" },
    { required: true, message: "请输入问题描述", trigger: "blur" },
  ],
  exceptionHow: [
    { min: 1, max: 1000, message: "长度在 1 到 1000 个字符", trigger: "blur" },
    { required: true, message: "请输入问题描述", trigger: "blur" },
  ],
  exceptionHowMuch: [
    { min: 1, max: 1000, message: "长度在 1 到 1000 个字符", trigger: "blur" },
    { required: true, message: "请输入问题描述", trigger: "blur" },
  ],
  version: [],
  remarks: [
    { min: 1, max: 900, message: "长度在 1 到 900 个字符", trigger: "blur" },
  ],
  createTime: [],
  createdUserId: [
    { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" },
  ],
  createdUserName: [
    { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" },
  ],
  lastUpdateTime: [],
  lastUpdatedUserId: [
    { min: 1, max: 32, message: "长度在 1 到 32 个字符", trigger: "blur" },
  ],
  lastUpdatedUserName: [
    { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" },
  ],
  enabled: [
    { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" },
  ],
  deleted: [],
});

const formRef = ref(ElForm);

let formData = reactive({
  id: "",
  qualityExceptionId: "",
  qualityExceptionCode: "",
  exceptionWhat: "",
  exceptionWhy: "",
  exceptionWhen: "",
  exceptionWhere: "",
  exceptionWho: "",
  exceptionHow: "",
  exceptionHowMuch: "",
  version: "",
  remarks: "",
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  lastUpdateTime: "",
  lastUpdatedUserId: "",
  lastUpdatedUserName: "",
  enabled: "",
  deleted: "",
  isSubmit: 0,
});

watch(
  () => props.data,
  (newVal: any) => {
    formData.id = "";
    if (newVal?.id) {
      const {
        id,
        qualityExceptionId,
        qualityExceptionCode,
        exceptionWhat,
        exceptionWhy,
        exceptionWhen,
        exceptionWhere,
        exceptionWho,
        exceptionHow,
        exceptionHowMuch,
        version,
        remarks,
        createTime,
        createdUserId,
        createdUserName,
        lastUpdateTime,
        lastUpdatedUserId,
        lastUpdatedUserName,
        enabled,
        deleted,
      } = newVal;
      Object.assign(formData, {
        id,
        qualityExceptionId,
        qualityExceptionCode,
        exceptionWhat,
        exceptionWhy,
        exceptionWhen,
        exceptionWhere,
        exceptionWho,
        exceptionHow,
        exceptionHowMuch,
        version,
        remarks,
        createTime,
        createdUserId,
        createdUserName,
        lastUpdateTime,
        lastUpdatedUserId,
        lastUpdatedUserName,
        enabled,
        deleted,
      });
      formData.qualityExceptionId = newVal.id;
      console.log(formData.qualityExceptionId);
      getD2(formData.qualityExceptionId);
    }
  }
);

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
  resetForm();
}

/** 重置表单 */
function resetForm() {
  formRef.value.resetFields();
  formRef.value.clearValidate();
  formData.id = "";
  formData.qualityExceptionId = "";
  formData.qualityExceptionCode = "";
  formData.exceptionWhat = "";
  formData.exceptionWhy = "";
  formData.exceptionWhen = "";
  formData.exceptionWhere = "";
  formData.exceptionWho = "";
  formData.exceptionHow = "";
  formData.exceptionHowMuch = "";
  formData.version = "";
  formData.remarks = "";
  formData.createTime = "";
  formData.createdUserId = "";
  formData.createdUserName = "";
  formData.lastUpdateTime = "";
  formData.lastUpdatedUserId = "";
  formData.lastUpdatedUserName = "";
  formData.enabled = "";
  formData.deleted = "";
  formData.isSubmit = 0;
}

const loading = ref(false);

/** 问题描述保存提交 */
function handleSubmit(state: Number) {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      loading.value = true;
      formData.isSubmit = state;
      console.log(formData.qualityExceptionId);
      await request({
        url: "/qms/q8dd2/save",
        method: "post",
        data: formData,
      }).finally(() => {
        loading.value = false;
      });
      ElMessage.success(`成功`);
      closeDialog();
      emit("reset-table", formData.id);
    }
  });
}
//过去业务信息D71
const getD2 = async (id: string) => {
  const res = await request({
    url: "/qms/q8dd2/getD2",
    method: "post",
    data: {
      qualityExceptionId: id,
    },
  });
  if (res.data != null) {
    Object.assign(formData, res.data);
  } else {
    formData.id = "";
  }
};
// 组件销毁时调用
onBeforeUnmount(() => {
  visibleDialog.value = false;
  emit("change-visible", false);
});
</script>
